<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <todo-header></todo-header>
        <todo-list :list="list"></todo-list>
        <todo-list :list="list"></todo-list>
        <todo-footer :list="list"></todo-footer>
      </div>
    </div>
  </div>
</template>

<script>
  import todoHeader from "./components/todo-header"
  import todoList from "./components/todo-list"
  import todoFooter from "./components/todo-footer"
  export default {
    name: 'App',
    data(){
      return {
        //todolist的核心数据
        list:[]
      }
    },
    methods:{
      //修改list的工具 它可以为list去新增任务
      add(task){
        this.list.unshift(task)
      },
      //修改list的工具 它可以修改给定item的checked状态
      checked(item,flag){
        item.checked = flag;
      },
      //修改list的工具 它可以删除指定的任务
      del(id){
        this.list = this.list.filter((item)=>{
          //如果任务的id 不等于 选中要删除的那个id 那就直接返回出去
          return item.id !== id
        })
      },
      //修改list的工具 它可以修改所有item的checked状态
      checkAll(val){
          //val 代表全选复选框的状态
          /*this.list.forEach((item)=>{
            item.checked = val
          })*/

        this.list = this.list.map((item)=>{
            item.checked = val;
            return item
        })
      },
      //修改list的工具 它可以清除已完成的任务
      clearComputed(){
          this.list = this.list.filter((item)=>{
            //把未完成的留下来
            return !item.checked
          })
      }
    },
    components:{
      "todo-header":todoHeader,
      "todo-list":todoList,
      "todo-footer":todoFooter,
    },
    mounted(){
      //从storage中读取数据
      let list = JSON.parse(localStorage.getItem("list"));
      this.list = list ? list: [];

      //给总线注册事件  这事件是用来做新增的
      this.$bus.$on("add",this.add)
      //给总线注册事件  这事件是用来做选中的
      this.$bus.$on("checked",this.checked)
      //给总线注册事件  这事件是用来做删除的
      this.$bus.$on("del",this.del)
      //给总线注册事件  这事件是用来做全选 全不选的
      this.$bus.$on("checkAll",this.checkAll)
      //清除已完成任务
      this.$bus.$on("clearComputed",this.clearComputed)
    },
    watch:{
      //浅监听 只有list本身发生改变时 对应的回调才会执行
      //list中的一个对象发生改变时 watch默认是监听不到的
      /*list(newVal){
        console.log(newVal);
      }*/

      //深度监听
      list:{
        deep:true,
        handler(newVal){
          //只有list有改变  我们就应该把它存到storage中
          localStorage.setItem("list",JSON.stringify(newVal))
        }
      }
    }
  }
</script>

<style  scoped>
  .todo-container {
    width: 600px;
    margin: 0 auto;
  }
  .todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
</style>
